<template>
    <el-dialog 
    :model-value="visible" 
    :title="title" 
    :before-close="onClose"
    :destory-on-close="true"
    append-to-body
    :width="width + 'px'"
    :close-on-click-modal="false"
    >
    <div class="container" :style="{ height: height + 'px' }">
    <!--内容展示到插槽里-->
     <slot name="content"></slot>
    </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="danger" @click="onClose">取消</el-button>
            <el-button type="primary" @click="onConfirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
</template>

<script setup lang="ts">
//弹框属性
interface DialogProps{
    title:string,//标题
    visible:boolean,//控制弹框的显示
    width?:number,
    height?:number
}
//接受父组件传递过来的值
const props = withDefaults(defineProps<DialogProps>(),{
    title:'标题',
    visible:false,
    width:630,
    height:280
})
const emit = defineEmits(['onClose','onConfirm'])
//弹框关闭确定
const onClose = ()=>{
    emit('onClose')
}
const onConfirm = ()=>{
    emit('onConfirm')
}
</script>

<style scoped lang="scss">
.container {
    overflow-x: initial;
    overflow-y: auto;
}
.el-dialog{
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
        .el-dialog__header{
        margin-right: 0px;
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        background-color: #7d9fed !important;
        .el-dialog__title {
            color:#ffffff;
            font-size: 16px;
            font-weight: 600;
        }
    }
    .el-dialog__headerbtn {
        .el-dialog__close{
            color: #ffffff;
        }
    }
    .el-dialog__body{
        padding: 10px;
    }
    .el-dialog__footer{
        border-top: 1px solid #ffffff !important;
        padding:10px;
    }
}

</style>